/**
  transition 多个元素或组件过度
 */

<template>
  <div>
    <div class="content-box">
      <button @click="onToggle">toggle</button>
      <transition mode="in-out">
        <!-- <div v-if="isShow" key="hello">hello world</div>
        <div v-else key="welcome">welcome</div> -->
        <!-- 动态组件切换 -->
        <component :is="type"></component>
      </transition>
    </div>

    <h5>功能：transition 多个元素或组件过度</h5>
    <ol class="desc-box">
      <li>transition，组件间切换 mode的使用: out-in 先隐藏后显示； in-out 先显示后隐藏；</li>
    </ol>
  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('child-one',{
  template:'<div>child-one</div>'
})
Vue.component('child-two',{
  template:'<div>child-two</div>'
})

export default {
  data() {
    return {
      isShow: true,
      type:'child-one'
    };
  },
  mounted(){
    // console.log(Velocity)
  },
  methods: {
    onToggle() {
      this.isShow = !this.isShow;
      this.type = this.type === 'child-one' ? 'child-two' : 'child-two'
    }
  }
};
</script>

<style>
.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-active{
  transition:opacity 1s;
}

</style>
